<script setup lang="ts">
import { useRoute } from 'vue-router';
import { getById } from "../api/flow.js"
import { onMounted, ref } from 'vue';

let route = useRoute()
let flowId = route.params.id
console.log("流水Id")
console.log(flowId)

const result = ref({})

onMounted(() => {
    getFlowDetail()
})

async function getFlowDetail() {
    const response = await getById(flowId)
    console.log(response)
    result.value = response.data.data
}
</script>

<template>
    <div class="container">
        <h2 class="title">流水详情</h2>
        <!-- 流水信息+订单信息 -->
        <div class="detail-box">
            <h3>流水信息</h3>
            <div class="detail-item">
                <span>流水号:</span>
                <span>{{ result.flowNumber }}</span>
            </div>
            <div class="detail-item">
                <span>支付状态:</span>
                <span v-if="result.orderStatus == 0">已取消</span>
                <span v-else-if="result.orderStatus == 1">已支付</span>
                <span v-else>未支付</span>
            </div>
            <div class="detail-item">
                <span>支付时间:</span>
                <span>{{ result.flowCreateTime }}</span>
            </div>
            <div class="detail-item">
                <span>实付金额:</span>
                <span>{{ result.paidPrice }}</span>
            </div>

            <h3>订单信息</h3>
            <div class="detail-item">
                <span>订单号:</span>
                <span>{{ result.orderNumber }}</span>
            </div>
            <div class="detail-item">
                <span>商品名称:</span>
                <span>{{ result.productName }}</span>
            </div>
            <div class="detail-item">
                <span>商品价格:</span>
                <span>￥{{ result.productPrice }}</span>
            </div>
            <div class="detail-item">
                <span>下单时间:</span>
                <span>{{ result.orderCreateTime }}</span>
            </div>

            <h3>收件信息</h3>
            <div class="detail-item">
                <span>收件人姓名:</span>
                <span>{{ result.receiveUsername }}</span>
            </div>
            <div class="detail-item">
                <span>收件人手机号:</span>
                <span>{{ result.receiveUserTelon }}</span>
            </div>
            <div class="detail-item">
                <span>收件地址:</span>
                <span>{{ result.addressInfo }}</span>
            </div>

            <h3>优惠券信息</h3>
            <div class="detail-item">
                <span>优惠券名称:</span>
                <span>{{ result.couponName }}</span>
            </div>
            <div class="detail-item">
                <span>优惠券金额:</span>
                <span>{{ result.couponPrice }}</span>
            </div>

            <div class="button-container">
                <button class="btn">查看所有订单</button>
            </div>
        </div>
    </div>
</template>

<style scoped>
.container {
    padding: 20px;
    margin-top: 50px;
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #f9f9f9;
}

.title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 30px;
}

.detail-box {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h3 {
    font-size: 20px;
    margin-top: 20px;
    color: #0077ff;
    border-bottom: 2px solid #0077ff;
    padding-bottom: 5px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.detail-item span {
    flex: 1;
}

.button-container {
    text-align: center;
    margin-top: 20px;
}

.btn {
    background-color: #00aaff; /* 天蓝色 */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #0077cc; /* 深一点的蓝色 */
}
</style>
